<template>
	<div class="user-guid">
		<!--领取补贴金-->
		<van-popup class="package-popups" :close-on-click-overlay="true" v-model="visible">
			<div class="main">
				<div class="main-t" :class="[visibleClass ? 'main-t-a' : '']">
					<div class="text">
						<p>您有一份翼支付专享红包</p>
						<h2>最高得188元</h2>
						<p class="desc">- 赶快领取吧 -</p>
					</div>
				</div>
				<div class="main-b" :class="[visibleClass ? 'main-b-a' : '']"></div>
				<div class="package-popups__gold" @click="tonew">
					<img
						v-show="goldAnimated == index + 1"
						:src="require(`@/assets/icons/gold/${index + 1}.png`)"
						alt=""
						v-for="(item, index) in 11"
						:key="index"
					/>
				</div>
			</div>
		</van-popup>

		<!--新人爆炸幸运大转盘-->
		<!-- <van-popup class="lucky-popup" v-model="luckyVisible">
			<div class="main" @click="toLucky">
				<img class="lucky-title" src="@/assets/images/index/lucky-title.png" alt="" />
				<img class="lucky-bg" src="@/assets/images/index/lucky-bg.png" alt="" />
				<img class="lucky-turn" src="@/assets/images/index/lucky-turn.png" alt="" />
				<img class="lucky-dark" src="@/assets/images/index/lucky-dark.png" alt="" />
				<img class="lucky-light" src="@/assets/images/index/lucky-light.png" alt="" />
				<img class="lucky-arrow" src="@/assets/images/index/lucky-arrow.png" alt="" />
				<img class="lucky-circle" src="@/assets/images/index/lucky-circle.png" alt="" />
				<img class="lucky-package" src="@/assets/images/index/lucky-package.png" alt="" />
				<img class="lucky-radius" src="@/assets/images/index/lucky-radius.png" alt="" />
				<img class="lucky-btn" src="@/assets/images/index/lucky-btn.png" alt="" />
			</div>
		</van-popup> -->

		<!--大转盘悬浮-->
		<!-- <div class="side-float">
			<div class="close">
				<i class="iconfont icon-guanbi" @click="closeGuid"></i>
			</div>
			<div class="img-box" @click="toLucky">
				<img class="bg" src="@/assets/images/index/lucky-float-bg.png" alt />
				<img class="btn" src="@/assets/images/index/lucky-float-btn.png" alt />
			</div>
		</div> -->
	</div>
</template>

<script>
import store from 'store';
import { Popup } from 'vant';
import { mapGetters } from 'vuex';
export default {
	name: 'UserGuid',
	components: {
		'van-popup': Popup
	},
	data() {
		return {
			visible: false,
			visibleClass: false,
			luckyVisible: false,
			goldAnimated: 1 // 金币动效
		};
	},
	created() {
		// 读取配置区分百万补贴、大转盘
		if (window.location.href.indexOf('flashsale') === -1) {
			if (!store.get('luckyVisible')) {
				// 后续不再弹出幸运大转盘
				store.set('luckyVisible', 'false');
				this.luckyVisible = true;
			} else {
				this.$service.shopping.userDayAllowance
					.dayAllowanceInfo({
						app: 'yzf'
					})
					.then(res => {
						// 开启领取补贴弹窗
						if (res.todayBillonStatus === 0) {
							this.visible = true;
						}
					});
			}
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		tonew() {
			setInterval(() => {
				this.goldAnimated++;

				if (this.goldAnimated > 11) {
					this.goldAnimated = 1;
				}
			}, 100);

			setTimeout(() => {
				this.visible = false;
				this.$baiduPush('首页点击事件', 'tap', '进入百亿补贴');
				let token = store.get('token');
				let url = 'https://zfx.xmonecode.com/million/?app=yzf&sdkType=yzf&token=' + token + '#/';
				window.location.href = url;
			}, 900);
		},
		toLucky() {
			this.$baiduPush('首页点击事件', 'tap', '进入幸运大转盘');
			let token = store.get('token');
			let url = 'https://zfx.xmonecode.com/lucky/?app=yzf&sdkType=yzf&token=' + token + '#/';
			window.location.href = url;
			// if (this.userInfo.isWhite === 1) {
			// 	let url = 'https://zfx.xmonecode.com/lucky/?app=yzf&sdkType=yzf&token=' + token + '#/';
			// 	window.location.href = url;
			// } else {
			// 	let url = 'https://zfx.xmonecode.com/million/?app=yzf&sdkType=yzf&token=' + token + '#/';
			// 	window.location.href = url;
			// }

			this.luckyVisible = false;
		},
		open() {
			this.visible = true;
		},
		close() {
			this.visible = false;
		},
		closeGuid() {
			this.$emit('closeGuid');
		}
	}
};
</script>

<style lang="scss" scoped>
.side-float {
	position: fixed;
	right: 20px;
	bottom: 280px;
	width: 114px;
	height: 160px;
	z-index: 1000;
	.close {
		@include flexBox(flex-end);
		i {
			@include flexBox(center, center);
			font-size: 24px;
			width: 30px;
			color: $color-white;
			height: 30px;
			border-radius: 50px;
			padding: 8px;
			background: rgba(0, 0, 0, 0.5);
		}
	}
	.img-box {
		position: relative;
		height: 114px;
		@include flexBox(center, center, column);
		.bg {
			width: 166px;
			height: 114px;
			position: absolute;
		}
		.btn {
			position: absolute;
			width: 112px;
			bottom: -8px;
			animation: animation_scal 2s infinite;
		}
	}
}
.van-popup {
	background: none;
	margin-top: -50px;
	.img-box {
		width: 700px;
		padding: 20px;
		@include flexBox(center);
		img {
			width: 100%;
			animation: animate_show 0.5s;
		}
	}
	.close {
		height: 40px;
		text-align: center;
		@include flexBox(center, flex-start);
		i {
			@include flexBox(center, center);
			font-size: 24px;
			width: 36px;
			color: $color-white;
			height: 36px;
			border-radius: 50px;
			padding: 8px;
			background: rgba(0, 0, 0, 0.8);
		}
	}
}
.package-popups {
	width: 100%;
	// height: 100vh;
	// background: transparent;
	.main {
		width: 550px;
		margin: 0 auto;
		color: #fff;
		height: 700px;
		@include flexBox(center, center, column);
		background-size: 100% 100%;
		position: relative;
		transform-style: preserve-3d;
		// top: 300px;
		.main-t {
			background: url('../../../assets/images/index/special/backage-t.png');
			background-size: 100% 100%;
			width: 100%;
			height: 512px;
			position: absolute;
			top: 0;
			transition: all 1s;
			.text {
				position: absolute;
				top: 110px;
				text-align: center;
				width: 100%;
				p {
					font-size: 30px;
				}
				h2 {
					font-size: 50px;
					margin-top: 15px;
				}
				.desc {
					font-size: 32px;
					margin-top: 60px;
					margin-bottom: 30px;
				}
			}
		}
		.main-t-a {
			top: -110%;
		}
		.main-b {
			background: url('../../../assets/images/index/special/backage-b.png');
			background-size: 100% 100%;
			width: 100%;
			height: 328px;
			position: absolute;
			bottom: 0;
			transition: all 1s;
		}
		.main-b-a {
			bottom: -100%;
		}
		.main-c {
			background: url('../../../assets/images/index/special/backage-c.png');
			background-size: 100% 100%;
			width: 150px;
			height: 150px;
			position: absolute;
			bottom: 135px;
			transform: perspective(99999);
			animation: lin-ani 3s linear infinite;
		}
		.main-c-a-t {
			animation: lin-ani-t 1s linear infinite;
		}

		img {
			width: 152px;
			height: 152px;
		}
	}

	&__gold {
		position: absolute;
		left: 200px;
		bottom: 135px;

		img {
			height: 50px;
			width: 50px;
		}
	}
}
@keyframes animate_show {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}
// 判断iphoneX 将 footerBox 的 padding-bottom 填充到最底部
@supports (bottom: env(safe-area-inset-bottom)) {
	.side-float {
		margin-bottom: env(safe-area-inset-bottom);
	}
}
@keyframes lin-ani-t {
	form {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}
.lucky-popup {
	.main {
		position: relative;
		animation: boom 2s;
		@include flexBox(center, center, column);
		.lucky-title {
			width: 410px;
			margin-bottom: 60px;
		}
		.lucky-bg {
			width: 686px;
		}
		.lucky-turn {
			position: absolute;
			bottom: 20px;
			width: 416px;
			height: 416px;
			animation: rotate_in 20s linear infinite;
			animation-fill-mode: forwards;
		}
		.lucky-dark {
			width: 392px;
			position: absolute;
			bottom: 30px;
			animation: opacity_in 2s infinite;
		}
		.lucky-light {
			width: 392px;
			position: absolute;
			bottom: 30px;
			animation: opacity_out 2s infinite;
		}
		.lucky-arrow {
			width: 128px;
			height: 154px;
			position: absolute;
			bottom: 160px;
		}
		.lucky-circle {
			width: 102px;
			height: 100px;
			position: absolute;
			bottom: 176px;
		}
		.lucky-package {
			width: 376px;
			height: 210px;
			position: absolute;
			bottom: -20px;
		}
		.lucky-radius {
			width: 380px;
			height: 96px;
			position: absolute;
			bottom: 0px;
		}
		.lucky-btn {
			width: 194px;
			height: 50px;
			position: absolute;
			bottom: 24px;
			left: 50%;
			margin-left: -110px;
			animation: animation_scal 2s infinite;
		}
	}
}
@keyframes boom {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
@keyframes opacity_in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes opacity_out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes animation_scal {
	0% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.8);
	}
}
@keyframes rotate_in {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
